<template xmlns="http://www.w3.org/1999/html">
  <scroller style='align-items:center'>
    <div>
        
        <div style="width: 750; height: 200;">
            <image class="img" :src="imageUrl"></image>
        </div>
        <div>
            <!-- <router-view></router-view> -->
            <text class="button" @click="jump('messages')"> 跳转至messages页面 </text>
        </div>
        <div class="example">
        <switch @change="onchange2"></switch>
        <text class="info">控制输入框是否显示</text>
        </div>
        <div class="example">
            <switch @change="onchange1"></switch>
            <text class="info">控制轮播图是否显示</text>
        </div>
        <div class="example">
            <switch @change="onchange3"></switch>
            <text class="info">textarea是否显示</text>
        </div>
        <div class="example">
            <switch @change="onchange4"></switch>
            <text class="info">视频播放是否显示</text>
        </div>
        <div>
            <text style="font-size: 40px">oninput: {{input}}</text>
             <text style="font-size: 40px">onchange: {{txtChange}}</text>
            <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
            <!-- <text style="font-size: 40px">selection: {{txtSelection}}</text>  -->

        </div>
        <div v-if="checked2">
        <input ref="input" class="input" type="text"  value=""  @input="oninput" @change="onchange" placeholder="请输入要添加的内容" disabled="false" maxlength="200" />
        <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
        <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
        <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
        <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
        <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
        <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
        <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
        <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
        <a class="button">
              <text class="text" @click="add">添加</text>
        </a>
        </div>
        <div class="wrapper" v-if="checked3">
            <textarea class="textarea"  @change="onchange99" @input="oninput" @focus="onfocus" @blur="onblur"></textarea>
        </div>
         <!-- <name :items = "items"></name>  -->
        <slider-neighbor class="slider" interval="3000" auto-play="true" v-if="checked1">
            <div class="frame" v-for="img in imageList">
            <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider-neighbor>
        <slider class="slider" interval="3000" auto-play="true" v-if="checked1">
            <div class="frame" v-for="img in imageList">
            <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider>
        <!-- <slider-tab class="slider" interval="3000" auto-play="true" v-if="checked1">
            <div class="frame" v-for="img in imageList">
            <image class="image" resize="cover" :src="img.src"></image>
            </div>
        </slider-tab> -->
        <div v-if="checked4">
            <video class="video" :src="src" autoplay controls 
            @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
        </div>
        <div>
            <image style="width: 560px;height: 560px;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
        </div>
    </div>
    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
      <text class="indicator">Refreshing ...</text>
    </refresh>
    <div class="cell" v-for="(num,key) in lists">
      <div class="panel">
        <text class="text">{{lists[key]}}:{{num}}</text>
      </div>
    </div>
    <loading class="loading" @loading="onloading" :display="showLoading">
      <text class="indicator">Loading ...</text>
    </loading>
  </scroller>
  
</template>

<script>
    const modal = weex.requireModule('modal')
    const LOADMORE_COUNT = 4
    export default {
        data: {
            imageUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
            input:'',
            sex:'male',
            items:[],
            imageList: [
                { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
                { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
            ],
            checked1: false,
            checked2: false,
            checked3: false,
            checked4: false,
            txtChange:'',
            txtReturnType:'',
            src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4',
            showLoading: 'hide',
            lists: [1, 2, 3, 4, 5],
            refreshing: false,

        },
        methods: {
            oninput: function(e) {
                console.log('ominput:', e.value);
                this.input = e.value;
                modal.toast({
                message: `输入更改事件: ${e.value}`,
                duration: 0.8
                })
            },
            jump:function (e) {
                console.log(e);
                this.$router.push(e);
            },
            add: function (e){
                alert(this.input);
                if(this.input === ''){
                    return;
                }else{
                this.items.unshift({name:this.input,sex:this.sex})
                this.input = "";
                }
                    
                
                if(this.sex === 'female'){
                    this.sex = 'male';
                }else{
                    this.sex = 'female';
                }
            },
            onchange1: function(e){
                console.log(`onchage, value: ${e.value}`)
                this.checked1 = e.value
            },
            onchange2: function(e){
                console.log(`onchage, value: ${e.value}`)
                this.checked2 = e.value
            },
            onchange3: function(e){
                console.log(`onchage, value: ${e.value}`)
                this.checked3 = e.value
            },
            onchange4: function(e){
                console.log(`onchage, value: ${e.value}`)
                this.checked4 = e.value
            },
             onchange: function (event) {
                this.txtChange = event.value;
                console.log('onchange', event.value);
            },
            onreturn: function (event) {
                this.txtReturnType = event.returnKeyType;
                console.log('onreturn', event.type);
            },
            onchange99 (event) {
            modal.toast({
            message: `输入完成事件: ${event.value}`,
            duration: 0.8
            })
            },
            onfocus (event) {
                modal.toast({
                message: `获取焦点事件: ${event.value}`,
                duration: 0.8
                })
            },
            onblur (event) {
                modal.toast({
                message: `失去焦点事件: ${event.value}`,
                duration: 0.8
                })
            },
            onstart (event) {
                this.state = 'onstart'
            },
            onpause (event) {
                this.state = 'onpause'
            },
            onfinish (event) {
                this.state = 'onfinish'
            },
            onfail (event) {
                this.state = 'onfinish'
            },
            
            onloading (event) {
                modal.toast({ message: 'loading', duration: 1 })
                this.showLoading = 'show'
                setTimeout(() => {
                const length = this.lists.length
                for (let i = length; i < length + LOADMORE_COUNT; ++i) {
                    this.lists.push(i + 1)
                }
                this.showLoading = 'hide'
                }, 1500)
            },
            onrefresh (event) {
                console.log('is refreshing')
                modal.toast({ message: 'refresh', duration: 1 })
                this.refreshing = true
                setTimeout(() => {
                this.refreshing = false
                }, 2000)
            },
            onpullingdown (event) {
                console.log('is onpulling down')
                modal.toast({ message: 'pulling down', duration: 1 })
            }
        }
    }
</script>

<style>
  .img { width: 200; height: 200; margin-left: 275}
  .input {
      font-size: 25px;
      width: 650px;
      margin-top: 50px;
      margin-left: 50px;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      color: #666666;
      border-width: 2px;
      border-style: solid;
      border-color: #41B883;
    }
  .button {
      width: 450px;
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 150px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: #DDDDDD;
      background-color: #F5F5F5
    }
    .text {
      font-size: 30px;
      color: #666666;
      text-align: center;
    }
      .slider {
    margin-top: 25px;
    margin-left: 25px;
    width: 700px;
    height: 700px;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
   .frame {
    width: 700px;
    height: 700px;
    position: relative;
  }
    .image {
    width: 700px;
    height: 700px;
  }

    .example {
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 60px;
  }
   .info {
    font-size: 30px;
    line-height: 60px;
    color: #BBB;
    margin-left: 10px;
  }
    .textarea {
    font-size: 50px;
    width: 650px;
    margin-top: 50px;
    margin-left: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: #666666;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
    .video {
    width: 630px;
    height: 350px;
    margin-top: 60px;
    margin-left: 60px;
  }
    .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
  .loading {
    justify-content: center;
  }
  .indicator {
    color: #888888;
    font-size: 42px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
  }
    .indicator {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }

</style>
